/* General page styles */
html, body {
    height: 100%; /* Ensure the body takes the full height of the viewport */
    margin: 0;
    overflow: hidden;
}

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Center horizontally */
    align-items: center;     /* Center vertically */
    position: relative;
}

h1{
    font-size: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    color: #333; 
    margin-bottom: 20px;
}

a {
    text-decoration: none; /* Remove the default underline */
    color: gray;
    text-align: center;
}

a:hover img {
    opacity: 0.8; /* Add a hover effect */
}

/* Photobooth container styles */
.photobooth-container {
    display: flex;
    justify-content: flex-start;  /* Center the photos horizontally within the container */
    align-items: center;      /* Center the photos vertically */
    gap: 60px;                /* Space between the photos */
    white-space: nowrap;
    overflow-x:scroll;
    padding-bottom: 10px;
    max-width: 80%;
    width: 100%;
    padding-left: 10px;
}   

/* Hide the scrollbar */
.photobooth-container::-webkit-scrollbar {
    display: none; /* This hides the scrollbar in WebKit browsers (Chrome, Safari, etc.) */
}

/* Photo styles */
.photo img {
    width: 250px; /* Width of each photo */
    height: 300px; /* Height of each photo */
    object-fit: cover;
    border-radius: 10px; /* Rounded corners */
}